<template> 
  <div>
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="onSubmit()"
          type="primary"
          size="small">
          查询结果
        </el-button>
      </div>
      <div style="margin-top: 10px">
        <el-form :inline="true" :model="brandDTO" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input style="width: 203px" v-model="brandDTO.name" placeholder="品牌名称/关键字"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <br>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button
        style="float: right"
        class="btn-add"
        @click="addBrand()"
        size="mini">
        添加
      </el-button>
    </el-card>
    <br>
    <div class="table-container">
      <el-table
        :data="brand"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="品牌表Id" width="120">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.id }}</span></template>
        </el-table-column>
        <el-table-column label="名称" width="120">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.name }}</span></template>
        </el-table-column>
        <el-table-column label="首字母" width="120">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.firstLetter }}</span></template>
        </el-table-column>
        <el-table-column label="排序" width="120">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.sort }}</span></template>
        </el-table-column>
        <el-table-column label="品牌制造商" width="100" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="handleFactoryStatusChange(scope.$index, scope.row)"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.factoryStatus">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否显示" width="100" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="handleShowStatusChange(scope.$index, scope.row)"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.showStatus">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="产品数量" width="120">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.productCount }}</span></template>
        </el-table-column>
        <el-table-column label="产品评论数量" width="120">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.productCommentCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleUpdate(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="batch-operate-container">
        <el-select
          size="small"
          v-model="operateType" placeholder="批量操作">
          <el-option
            v-for="item in operates"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button
          style="margin-left: 20px"
          class="search-button"
          @click="handleBatchOperate()"
          type="primary"
          size="small">
          确定
        </el-button>
      </div>
      <div class="pagination-container">


        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.brandDTO.pageNum"
          :page-sizes="[1, 2, 3, 4, 5]"
          :page-size="this.brandDTO.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <!--    <div class="block">-->
      <!--      <el-pagination-->
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"-->
      <!--        :current-page=this.brandDTO.pageNum-->
      <!--        :page-sizes="[1, 2, 3, 4]"-->
      <!--        :page-size=this.brandDTO.pageSize-->
      <!--        layout="total, sizes, prev, pager, next, jumper"-->
      <!--        :total=total>-->
      <!--      </el-pagination>-->
      <!--    </div>-->
    </div>
  </div>

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,

import {findBrandList, updateFactoryStatus, updateShowStatus} from "@/api/product/brand";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      operates: [
        {
          label: "显示品牌",
          value: "showBrand"
        },
        {
          label: "隐藏品牌",
          value: "hideBrand"
        }
      ],
      brand: [],
      brandDTO: {
        name: '',
        pageNum: 1,
        pageSize: 3
      },
      operateType: null,
      updateDTO: {
        ids: [],
        factoryStatus: '',
      },
      total: '',
      showStatus: '',
      factoryStatus: '',
      multipleSelection: []
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleBatchOperate() {
      console.log(this.multipleSelection);
      if (this.multipleSelection < 1) {
        this.$message({
          message: '请选择一条记录',
          type: 'warning',
          duration: 1000
        });
        return;
      }
      let showStatus = 0;
      if (this.operateType === 'showBrand') {
        showStatus = 1;
      } else if (this.operateType === 'hideBrand') {
        showStatus = 0;
      } else {
        this.$message({
          message: '请选择批量操作类型',
          type: 'warning',
          duration: 1000
        });
        return;
      }

      let ids = [];
      this.multipleSelection.forEach(brand => {
        ids.push(brand.id)
      })

      updateShowStatus(ids, showStatus).then(response => {
        this.$router.push({path: '/product/brand'})
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000,

        });

      }).catch(error => {
        if (row.showStatus === 0) {
          row.showStatus = 1;
        } else {
          row.showStatus = 0;
        }
      });
    },

    handleFactoryStatusChange(index, row) {
      updateFactoryStatus(row.id, row.factoryStatus).then(response => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        });
      }).catch(error => {
        if (row.factoryStatus === 0) {
          row.factoryStatus = 1;
        } else {
          row.factoryStatus = 0;
        }
      });
    },
    handleShowStatusChange(index, row) {
      updateShowStatus(row.id, row.showStatus).then(response => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        });
      }).catch(error => {
        if (row.showStatus === 0) {
          row.showStatus = 1;
        } else {
          row.showStatus = 0;
        }
      });
    },
    GetList() {
      findBrandList(this.brandDTO).then(res => {
        this.brand = res.data.list;
        this.total = res.data.total;
      })
    },
    addBrand() {
      this.$router.push({path: '/product/addBrand'})
    },
    handleUpdate(index, row) {
      this.$router.push({path: '/product/updateBrand', query: {id: row.id}})
    },
    handleSizeChange(val) {
      this.brandDTO.pageSize = val;
      this.GetList();
    },
    handleCurrentChange(val) {
      this.brandDTO.pageNum = val;
      this.GetList();
    },
    onSubmit() {
      this.GetList();
    }

  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.GetList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>


</style>
